import React, { useEffect } from 'react';
import { Layout, Collapse } from '@douyinfe/semi-ui';
import satelliteService from '../../services/satelliteService';
import LogNotification from '../../components/realtimePage/LogNotification';
import RealtimeTable from '../../components/realtimePage/RealtimeTable';
import RealtimeCheckboxGroup from '../../components/realtimePage/RealtimeCheckboxGroup';
import { SatelliteSystems } from '../../components/realtimePage/configs/satellite.config';
import { RealtimeProvider, useRealtimeContext } from '../../components/realtimePage/RealtimeContext';
import PositionComponent from '../../components/realtimePage/positionComponent';
import TimeComponent from '../../components/realtimePage/timeComponent';
import SatelliteTrackingComponent from '../../components/realtimePage/satelliteTrackingComponent';


const { Sider, Content } = Layout;

function TableContent() {
  const { checkedStates } = useRealtimeContext();

  return (
    <div style={{ padding: 0, display: 'flex', flexDirection: 'column', height: '100%' }}>
      {Object.keys(SatelliteSystems).filter(system => system !== 'default').map(system => {
        const hasCheckedItems = checkedStates[system]?.length > 0;
        return (
          <div key={system} style={{ flex: 1, minHeight: 0, display: hasCheckedItems ? 'block' : 'none' }}>
            <RealtimeTable satelliteType={system} />
          </div>
        );
      })}
      {/* <div key={"BDS"} style={{ flex: 1 }}>
        <RealtimeTable satelliteType={"default"} />
      </div> */}
    </div>
  );
}

const RealtimePage = () => {
  const CheckboxGroupHeight = '650px';

  const filteredEntries = Object.entries(SatelliteSystems).filter(
    ([type]) => type !== 'default'
  );

  // useEffect(() => {
  //   // 定义数据获取函数
  //   const fetchData = async () => {
  //     try {
  //       // 调用API获取所有卫星系统实时数据
  //       const allData = await satelliteService.getRealtimeData();
  //       console.log('所有卫星系统实时数据:', allData);
  //     } catch (error) {
  //       console.error('获取卫星数据失败:', error);
  //     }
  //   };

  //   // 立即执行一次数据获取
  //   fetchData();

  //   // 设置定时器，每5秒获取一次数据
  //   const intervalId = setInterval(fetchData, 5000);

  //   // 组件卸载时清除定时器
  //   return () => clearInterval(intervalId);
  // }, []);

  return (
    <RealtimeProvider>
      <Layout style={{ height: '100%', width: '100%' }}>
        <Sider
          style={{
            minWidth: '360px',
            maxWidth: '360px',
            background: 'var(--semi-color-fill-2)',
            height: '100%',
            boxSizing: 'border-box',
            overflow: 'hidden',
          }}
        >
          <Layout style={{ height: '100%', width: '100%', boxSizing: 'border-box' }}>
            <Content
              style={{
                display: 'flex',
                flexDirection: 'column',
                height: '100%',
              }}
            >
              {/* 顶部自适应部分（如果有） */}
              <PositionComponent />
              <TimeComponent />
              <SatelliteTrackingComponent />

              {/* 剩余高度容器 */}
              <div
                style={{
                  display: 'flex',
                  flexDirection: 'column', // 垂直排列
                  flex: 1,                 // 占满 Content 剩余空间
                  overflowY: 'auto',       // 超出滚动
                  minHeight: 0,            // Flex 容器中滚动需要
                }}
              >
                {filteredEntries.map(([type]) => (
                  <div
                    key={type}
                    style={{
                      boxSizing: 'border-box',
                      // marginBottom: '4px',  // 可选间距
                      overflow: 'auto',      // 内部内容滚动
                    }}
                  >
                    <RealtimeCheckboxGroup satelliteType={type} />
                  </div>
                ))}
              </div>
            </Content>
          </Layout>
        </Sider>

        <Content style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
          {/* <Collapse defaultActiveKey={['1']} style={{
            background: 'rgba(var(--semi-white), 1)',
            border: '1px solid #d9d9d9',
            borderRadius: '10px',
            margin: '5px 0',
          }}>
            <Collapse.Panel header="卫星系统选择" itemKey="1">
              <div
                style={{
                  whiteSpace: 'nowrap',
                  overflowX: 'auto',
                  maxHeight: CheckboxGroupHeight,
                  display: 'flex',
                }}
              >
                {filteredEntries.map(([type, config]) => (
                  <div
                    key={type}
                    style={{
                      flex: `0 0 ${100 / Object.keys(filteredEntries).length}%`,
                      boxSizing: 'border-box',
                      paddingRight: '2px',
                      overflow: 'auto',
                    }}
                  >
                    <RealtimeCheckboxGroup satelliteType={type} />
                  </div>
                ))}
              </div>
            </Collapse.Panel>
          </Collapse> */}

          {/* 占满剩余空间 */}
          <div style={{ flex: 1, minHeight: 0 }}>
            <TableContent />
          </div>
        </Content>

      </Layout>
    </RealtimeProvider>
  );
};

export default RealtimePage;
